<script lang="ts">
import { h,resolveComponent } from 'vue';
import { link } from 'fs';
// 定义接口来定义对象的类型
interface SvgIconProps{
    name:string,
    size:number,
    color:string,
}

export default {
    name:'svgIcon',
    props:{
        name:{
            type:String,
        },
        size:{
            type:Number,
            default:() => 14,
        },
        color:{
            type:String,
        }
    },
    setup(props:SvgIconProps) {
        //定义变量
       const linesString: any[] = ['https', 'http', '/src', '/assets', import.meta.env.VITE_PUBLIC_PATH];
		const onLineStyle: string = `font-size: ${props.size}px;color: ${props.color}`;
		const localsStyle: string = `width: ${props.size}px;height: ${props.size}px`;
		const eleSetStyle = { class: 'el-icon', style: onLineStyle };
        // 逻辑的判断
        if (props.name?.startsWith('ele-')) return () => h('i', eleSetStyle, [props.name === 'ele-' ? '' : h(resolveComponent(props.name))]);
		else if (linesString.find((str) => props.name?.startsWith(str))) return () => h('img', { src: props.name, style: localsStyle });
		else return () => h('i', { class: props.name, style: onLineStyle });
        
    },
}
</script>
